<template>
<!-- （收到邮件、发送的邮件、写新的邮件）按钮 -->
<div class="app-container">
  <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
          <el-button
              type="primary"
              icon="el-icon-upload2"
              size="mini"
          >发送邮件</el-button>
      </el-col>
  </el-row>
  <div style="padding-top: 6%;">
    <el-form :model="email" label-width="180px">
      <el-row>
        <el-col :span="18">
          <el-form-item label="接收人">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="emailProp"
            >选择用户</el-button>
            <!-- <el-tag v-for="tag in selected" :disable-transitions="false" :key="tag" closable type="info" @close="handleClose(tag)" > <span class="el-select__tags-text">{{ tag }}</span></el-tag> -->
            <el-tag
              v-for="tag in selected"
              :key="tag.userName"
              closable
              effect="plain"
              @close="handleClose(tag)"
              style="margin: 1px 0px 1px 10px;">
              <span class="el-select__tags-text">{{tag.userName}}</span>&nbsp;||&nbsp;<span class="el-select__tags-text">{{tag.nickName}}</span>
            </el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="标题">
            <el-input v-model="email.topic" placeholder="请输入标题"/>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="内容">
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入内容"
              v-model="email.content">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center;">
      <el-button type="primary" @click="submitDataEmail">确 定</el-button>
    </div>
  </div>
  <el-dialog title="选择用户" :visible.sync="open" append-to-body>
    <div class="usereq">
      <el-row :gutter="10" style="margin-top:0px !important;">
        <el-col :span="14"><div class="grid-content" style="font-size: 25px !important;">全部用户</div></el-col>
        <el-col :span="2"><div class="grid-content"></div></el-col>
        <el-col :span="8"><div class="grid-content" style="font-size: 25px !important;">已选用户</div></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="14">
          <div class="left_content">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-autocomplete
                    v-model="userName"
                    :fetch-suggestions="querySearch"
                    placeholder="搜索"
                    clearable
                    prefix-icon="el-icon-search"
                    @select="handleSelect"
                  >
                    <template slot-scope="{ item }" style="display: none;">
                      <div class="name">{{ item.userName }}</div>
                      <span class="addr">{{ item.nickName }}</span>
                    </template>
                  </el-autocomplete>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="padding:20px 0;margin-bottom:0;border-top:1px solid #323541;border-bottom:1px solid #323541;">
                <el-col class="center" :span="6">
                  <el-checkbox 
                    style="padding-top:2px"
                    class="grid-content able_checkbox" 
                    :indeterminate="isIndeterminate"
                    v-model="checkAll" 
                    @change="handleCheckAllChange">全选</el-checkbox>
                  </el-col>
                <el-col :span="9"><div class="grid-content">用户名称</div></el-col>
                <el-col :span="9"><div class="grid-content">用户昵称</div></el-col>
              </el-row>
              <el-checkbox-group v-model="checkedleft" ref="treeEquipment" @change="handleCheckedLeftChange">
                <el-row 
                  v-for="equipmentInfos in equipmentInfo" 
                  :key="equipmentInfos.userId" 
                  :gutter="10"
                  style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
                    <el-col class="center" :span="6">
                      <el-checkbox class="able_checkbox" :label="equipmentInfos">{{equipmentInfos.userId}}</el-checkbox>
                    </el-col>
                    <el-col :span="9">
                      <div class="grid-content">{{equipmentInfos.userName}}</div>
                    </el-col>
                    <el-col :span="9">
                      <div class="grid-content">{{equipmentInfos.nickName}}</div>
                    </el-col>
                </el-row>
              </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="center_content">
            <div class="center_content_r">
              <div class="rule_btn rule_btn_left" icon="glyphicon glyphicon-fast-backward" type="warning" @click="PutDataToRight()">
                <!-- <img src="./img/left.png"> -->
                >>>
              </div>
            <div style="margin-top:20px" class="rule_btn rule_btn_right" icon="el-icon-plus" type="warning" @click="PutDataToLeft()">
                <!-- <img src="./img/left.png"> -->
                &lt;&lt;&lt;
            </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="left_content">
              <el-row :gutter="10" style="padding:9px 0;margin-bottom:0;border-bottom:1px solid #323541;">
                <el-col class="center" :span="10">
                  <el-checkbox 
                    class="grid-content able_checkbox"
                    style="padding-top:2px"
                    :indeterminate="risIndeterminate" 
                    v-model="rcheckAll" 
                    @change="rhandleCheckAllChange">全选</el-checkbox>
                  </el-col>
                <el-col :span="4"><div class="grid-content"></div></el-col>
                <el-col :span="10"><div class="grid-content">用户昵称</div></el-col>
              </el-row>
              <el-checkbox-group v-model="rcheckedleft" @change="rhandleCheckedLeftChange">
                <el-row v-for="requipmentInfos in requipmentInfo" :key="requipmentInfos.userId" :gutter="10" style="margin:0;padding:10px 0;border-bottom:1px solid #323541;">
                    <el-col class="center" :span="10">
                      <el-checkbox class="able_checkbox" :label="requipmentInfos">{{requipmentInfos.userId}}</el-checkbox>
                    </el-col>
                    <el-col :span="4"><div class="grid-content"></div></el-col>
                    <el-col :span="10"><div class="grid-content">{{requipmentInfos.userName}}</div></el-col>
                </el-row>
              </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">确 定</el-button>
        <el-button @click="cancelDataScope">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
import { selectUserNameList,submitEmail} from "@/api/my_home_page/my_email/email";

export default {
  data() {
    return {
      emailName: [], // 查询条件
      userName:'',
      open:false,  //是否显示弹出层
      checkAll: false,  //候选区的全选框
      isIndeterminate: false,   //候选区单选框状态
      rcheckAll: false,   //选中区的全选框
      risIndeterminate: false,  //单选框状态
      checkedleft: [],    //候选区的内容
      rcheckedleft: [],   //选中区的内容
      equipmentInfo: [],
      requipmentInfo: [],
      email:{
        topic:undefined,
        content:'',
        emailUserName : []
      },
      selected:[],
      selectedValue:[],
    }
  },
  created(){
  },
  methods: {
    //打开弹出层
    emailProp(){
      this.open = true;
      this.getList();
      this.risIndeterminate = false
      this.isIndeterminate = false
      this.rcheckAll = false
      this.checkAll = false
      this.userName = ''
      // this.requipmentInfo = this.selected;
    },
    // 查询用户名称列表
    getList(){
      selectUserNameList().then( response => {
        this.emailName = response.rows;
        this.equipmentInfo = response.rows;
      });
    },
    querySearch(queryString, cb) {
      var results = [];
      var emailName = this.emailName;
      // console.log(queryString);
      // console.log("querySearch" + this.emailName);
      // console.log("querySearch" + this.equipmentInfo);
      if(queryString == ''){
        this.equipmentInfo = this.emailName
      }
      // 调用 callback 返回建议列表的数据
      var userNameResults = queryString ? (emailName.filter((en)=>en.userName.indexOf(queryString)===0)) : this.equipmentInfo;
      var nickNameResults = queryString ? (emailName.filter((en)=>en.nickName.indexOf(queryString)===0)) : this.equipmentInfo;
      if(userNameResults.length !== 0){
        results = userNameResults
        this.equipmentInfo = userNameResults
      }
      if(nickNameResults.length !== 0){
        results = nickNameResults
        this.equipmentInfo = nickNameResults
      }
      // this.equipmentInfo = results
      cb(results);
    },
    handleSelect(item) {
      // 调用 callback 返回建议列表的数据
      var userNameResults = item.userName ? (this.equipmentInfo.filter((en)=>en.userName.indexOf(item.userName)===0)) : this.equipmentInfo;
      var nickNameResults = item.userName ? (this.equipmentInfo.filter((en)=>en.nickName.indexOf(item.userName)===0)) : this.equipmentInfo;
      if(userNameResults.length !== 0){
        this.equipmentInfo = userNameResults
      }
      if(nickNameResults.length !== 0){
        this.equipmentInfo = nickNameResults
      }
      this.userName = item.userName;
      // console.log(item);
    },
    handleCheckAllChange(val) {
        this.checkedleft = val ? this.equipmentInfo : []
        this.isIndeterminate = false
    },
    handleCheckedLeftChange(v) {
        // console.log(v.length)
        const checkedCount = v.length
        this.checkAll = checkedCount === this.equipmentInfo.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.equipmentInfo.length
    },
    rhandleCheckAllChange(val) {
        this.rcheckedleft = val ? this.requipmentInfo : []
        this.risIndeterminate = false
    },
    rhandleCheckedLeftChange(v) {
        const checkedCount = v.length
        this.rcheckAll = checkedCount === this.requipmentInfo.length
        this.risIndeterminate = checkedCount > 0 && checkedCount < this.requipmentInfo.length
    },
    PutDataToRight() {
        // console.log(JSON.parse(JSON.stringify(this.checkedleft)))
        this.requipmentInfo = this.handleConcatArr(this.requipmentInfo, this.checkedleft)
        this.handleRemoveTabList(this.checkedleft, this.equipmentInfo)
        this.checkedleft = []
        this.checkAll = false
    },
    PutDataToLeft() {
        this.equipmentInfo = this.handleConcatArr(this.equipmentInfo, this.rcheckedleft)
        this.handleRemoveTabList(this.rcheckedleft, this.requipmentInfo)
        this.rcheckedleft = []
        this.rcheckAll = false
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList(checkArr, originalArr) {
      for (const item of checkArr) {
        if (originalArr.indexOf(item) > -1) {
          this.$nextTick(() => {
            originalArr.splice(originalArr.indexOf(item), 1)
          })
        }
      }
    },
    // 多选栏中的删除
    handleClose(tag) {
      let item = this.selected.indexOf(tag);
      this.selected.splice(item, 1);
      this.selectedValue.splice(item, 1);
      // console.log(this.selectedValue)
      // console.log(item)
    },
    // 确认按钮
    submitDataScope(){
      // console.log(this.requipmentInfo.length);
      if(this.requipmentInfo.length > 0){
        this.selected = this.requipmentInfo;
        this.email.emailUserName = this.selected
      }
      
      this.open = false;
      this.reset();

    },
    //取消按钮
    cancelDataScope(){
      this.reset();
      this.open = false;
    },
    // 重置内容
    reset(){
      this.requipmentInfo = []
      this.equipmentInfo = []
    },
    //提交按钮
    submitDataEmail(){
      // console.log(this.email);
      // var v = this.email.content;
      console.log(this.email.content.length)
      if(this.email.content.length <= 500){
        submitEmail(this.email);
        this.$modal.msgSuccess('发送成功！！');
        this.email.topic = undefined;
        this.email.content = '';
        this.email.emailUserName  = [];
        this.selected = [];
      }else{
        this.$modal.msgSuccess('发送失败！！！内容过长无法发送')
      }
      
    }
  }
}
</script>
<style lang="scss" scoped>

  // ::v-deep .el-dialog__body{
  //   background: #86877A  !important;
  // }
  .usereq{
    .el-row{
      margin: 20px 0 !important;
    }
    .grid-content,.grid-Prohibit {
      text-align: center;
      color: #152841;
      font-size: 16px;
      border-radius: 4px;
      min-height: 36px;
    }
    .grid-Prohibit {
      color: #414346;
    }
    .grid-content ::v-deep .el-checkbox__label{
      font-size:16px;
    }
    .left_content{
      height:400px;
      padding:0 20px 20px 20px;
      overflow-y: auto;
      // background: #868692;
      border-radius:5px;
      border:1px solid #323541;
    }
    .center_content{
      height:400px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:5px;
    }
    .el-select,::v-deep .el-input--small .el-input__inner{
      // color:#616B80;
      width:100%;
      background: #152841;
      border-color:#152841;
      border-radius: 5px;
    }
    ::v-deep .el-checkbox-group .el-checkbox__label{
        color: #020913;
    }
    ::v-deep .is-checked .el-checkbox__label{
        color: #020913;
    }
    .able_checkbox ::v-deep .el-checkbox__inner {
      border-color: #020913;
      background: #616B80;
      padding-top: 3px;
    }
    .prohibit_checkbox ::v-deep.el-checkbox__inner{
      border-color: #020913;
      background: #616B80;
  }
    .center{
      text-align: center;
    }
    .center_content_r{
      width:75%;
      height:180px;
    }
    .rule_btn{
      width:100%;
      height:60px;
      background:#152841;
      float:left;
      border:none;
    }
    .rule_btn_left, .rule_btn_right{
      background:#020913;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius:3px;
      color: floralwhite;
    }
    .rule_btn_left img{
      transform:rotate(180deg);
    }
    .rule_btn_left:hover, .rule_btn_right:hover{

        background: #616B80;
    }
  }
</style>